<template>
	<view class="collection-record">
		<view class="up">
			<u-tabs :list="tabList" @click="tabCheck" lineColor="#ffffff" class="my-tab"
			lineHeight="2" :itemStyle="{width:'50%',padding: '10px','box-sizing': 'border-box'}"
			:activeStyle="{
			        color: '#ffffff',
			        fontWeight: 'bold',
			        fontSize: '16px'
			    }"
			:inactiveStyle="{
					color: 'rgba(255,255,255,0.3)',
					fontSize: '16px'
				}"></u-tabs>
		</view>
		<view class="box-pading">
			<z-paging ref="paging" v-model="dataList" @query="queryList" :use-page-scroll="true"
				:show-empty-view-reload-when-error="false"
				:empty-view-img="empty.emptyImgUrl"
				:empty-view-img-style="empty.emptyImgStyle" :empty-view-text="emptyText">
				<view class="record-item" v-for="item in dataList" :key="item.id" @click="toDetail(item.from_address,item.id)">
					<view class="flex-no-horizontal f-base m-b-10 between">
						<view style="opacity: 0.8;width: 80%;">{{item.title}}{{item.name}}#{{item.number}}</view>
						<!-- <view class="green">+1</view> -->
					</view>
					<view class="flex-no-horizontal between" style="opacity: 0.3;">
						<text class="f-xs">{{item.state}}</text>
						<text class="f-xxs">{{item.time * 1000 | date('yyyy-mm-dd hh:MM:ss')}}</text>
					</view>
					<u-icon name="arrow-right" size="16" v-if="item.from_address"
					color="rgba(255,255,255,0.3)" class="arrow"></u-icon>
				</view>
			</z-paging>

		</view>
		<!-- <view class="empty flex-no-horizontal">
			<u--image src="../../static/img/empty-my-collection2.png" width="419rpx" heigt="337rpx"></u--image>
			<view class="text-center empty-text f-xs">
				您还未获得相关数字藏品<br>先去获得藏品吧～
			</view>
		</view> -->
	</view>
</template>

<script>
	import ZPagingMixin from '@/uni_modules/z-paging/components/z-paging/js/z-paging-mixin'
	import dynamicMore from '../../common/mixin/dynamic.js'
	import {collectionRecord} from '@/api/collection.js'
	export default{
		mixins: [ZPagingMixin,dynamicMore],
		data() {
			return{
				tabList: [{name: '收入',type: 1},{name: '支出',type:2}],
				type: 1,
				empty: {
					emptyText: '您还未获得相关数字藏品,先去获得藏品吧～',
					emptyImgUrl: '/static/img/empty-my-collection2.png',
					emptyImgStyle: {
						width: '419rpx',
						height: '337rpx'
					}
				},
				dataList: []
			}
		},
		computed: {
			emptyText() {
				return this.type === 1 ? '暂无藏品收入记录~~' : '暂无藏品支出记录~~'
			}
		},
		methods: {
			toDetail(address,id) {
				if (address) {
					uni.navigateTo({
						url: `./handselDetail?id=${id}`
					})
				}
			},
			tabCheck({type}) {
				this.type = type
				this.$refs.paging.reload()
			},
			//下拉刷新,上拉加载
			async queryList(pageNo, pageSize) {
				// if (!this.token) {
				// 	this.$refs.paging.complete(false);
				// 	return
				// }
				try {
					const res = await collectionRecord({
						type: this.type,
						page: pageNo,
					})

					this.$refs.paging.complete(res.data.nftlog.data || []);

				} catch (e) {
					//TODO handle the exception
					this.$refs.paging.complete(false);
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.collection-record{
		::v-deep .u-tabs__wrapper__nav{
			width: 100%;
		}
		::v-deep .zp-l-line-black{
			opacity: 0;
		}
		background-color: #121416;
		min-height: 100%;
		/* #ifdef H5 */
		.up{
			background-color: #000000;
			height: 51px;
			position: relative;
			z-index: 100;
			.my-tab{
				position: fixed;
				top: 44px;
				left: 0;
				right: 0;
				z-index: 20;
				background-color: #000000;
			}
		}
		/* #endif */
		/* #ifdef APP-PLUS */
		.up{
			background-color: #000000;
			height: 51px;
			position: relative;
			z-index: 100;
			.my-tab{
				position: fixed;
				top: 0;
				left: 0;
				right: 0;
				z-index: 20;
				background-color: #000000;
			}
		}
		/* #endif */
		.record-item{
			color: white;
			border-bottom: 1px solid rgba(255, 255, 255, 0.15);
			padding: 40rpx 50rpx 40rpx 0;
			position: relative;
			.green{
				color: #2BFF62;
			}
			.red{
				color: #FF4646;
			}
			.arrow{
				position: absolute;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
			}
		}
		.empty{
			margin-top: 200rpx;
			flex-direction: column;
			.empty-text{
				color: #FFFFFF;
				line-height: 40rpx;
				opacity: 0.6;
			}
		}
	}
</style>
